<template>
  <div id="addQuestionView">
    <h2>创建题目</h2>
    <a-form :model="form" :style="{width:'600px'}" label-align="left">

    <a-form-item field="title" label="题目标题">
    <a-input v-model="form.title" placeholder="请输入题目的标题..."  />
    </a-form-item>

    <a-form-item field="tags" label="题目标签">
      <a-input-tag v-model="form.tags" placeholder="请选择标签" allow-clear />
    </a-form-item>

    <a-form-item field="content" label="题目描述">
      <MdEditor :value="form.content" :handle-change="onContentChange" />
    </a-form-item>

    <a-form-item field="answer" label="答案" >
      <MdEditor :value="form.answer" :handle-change="onAnswerChange"/>
    </a-form-item>

    <a-form-item label="判题配置" :content-flex="false" :merge-props="false" style="min-width: 400px;">
      <a-space direction="vertical" style="min-width: 480px;">
        <a-form-item field="judgeConfig.timeLimit"  label="时间限制">
            <a-input-number v-model="form.judgeConfig.timeLimit" placeholder="请输入时间限制..." mode="button" size="large" />
          </a-form-item>
          <a-form-item field="judgeConfig.timeLimit"  label="内存限制">
            <a-input-number v-model="form.judgeConfig.memoryLimit" placeholder="请输入内存限制..." mode="button" size="large" />
          </a-form-item>
          <a-form-item field="judgeConfig.timeLimit"  label="堆栈限制">
            <a-input-number v-model="form.judgeConfig.stackLimit" placeholder="请输入堆栈限制..." mode="button" size="large" />
          </a-form-item>
      </a-space>
    </a-form-item>

    <a-form-item label="测试用例配置" :content-flex="false" :merge-props="false">
          <a-form-item 
          v-for="(judgeCaseItem,index) of form.judgeCase" 
          :label="`测试用例 ${index}`" 
          :key="index"
        >
        <a-space direction="vertical" style="min-width: 480px;">
        <a-form-item 
          :field="`form.judgeCase[${index}].input`" 
          :label="`输入用例 ${index}`" 
          :key="index"
        >
          <a-input v-model="judgeCaseItem.input" placeholder="请输入input..."  />
      </a-form-item>

      <a-form-item
          :field="`form.judgeCase[${index}].output`" 
          :label="`输出用例 ${index}`" 
          :key="index"
        >
        <a-input v-model="judgeCaseItem.output" placeholder="请输入output..." />
        </a-form-item>

        <a-button status="danger" @click="handleDelete(index)" :style="{marginLeft:'10px'}">删除</a-button>
        </a-space>
        </a-form-item>
        <div style="margin-top: 32px;">
        <a-button @click="handleAdd" type="outline" status="success">新增测试用例</a-button>
        </div>
   
    </a-form-item>

    <div style="margin-top: 16px;">
      <a-form-item>
        <a-button type="primary" style="min-width: 200px;" @click="doSubmit">提交</a-button>
     </a-form-item>
    </div>
</a-form>
</div>

</template>

<style scoped>
</style>

<script setup lang="ts">
import MdEditor from '@/components/MdEditor.vue';
import message from '@arco-design/web-vue/es/message';
import { QuestionControllerService } from '../../../generated';
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';

let form = ref({
     title:"",
     tags:[],
     answer:"",
     content:"",
     judgeConfig:{
       memoryLimit:1000,
       stackLimit:1000,
       timeLimit:1000,
     },
     judgeCase:[
      {
        input:"",
        output:"",
      }
    ],
});

const route=useRoute();
//判断是更新页面还是创建页面
const updatePage=route.path.includes("update");

const loadData = async()=>{
  const id = route.query.id;
  if(!id){
    return;
  }
 const res = await QuestionControllerService.getQuestionByIdUsingGet(id as any);
 if(res.code === 0){
    form.value=res.data as any;
    console.log(form.value);
    
    if(!form.value.judgeCase){
      form.value.judgeCase=[
        {
          input:"",
          output:"",
        },
      ];
    }else{
      form.value.judgeCase=JSON.parse(form.value.judgeCase as any);
    }
    if(!form.value.judgeConfig){
       form.value.judgeConfig={
       memoryLimit:1000,
       stackLimit:1000,
       timeLimit:1000,
     };
    } else {
      form.value.judgeConfig = JSON.parse(form.value.judgeConfig as any);
    }
    if (!form.value.tags) {
      form.value.tags = [];
    } else {
      form.value.tags = JSON.parse(form.value.tags as any);
    }
 }
  else{
   message.error("加载失败, "+res.message);
 }
}

onMounted(()=>{
   loadData();
});

const handleAdd = () => {
  form.value.judgeCase.push({
     input:"",
     output:"",
  });
};
    
const handleDelete = (index:number) => {
    form.value.judgeCase.splice(index, 1)
};

const doSubmit= async()=>{
  if(updatePage){
    const res=await QuestionControllerService.updateQuestionUsingPost(form.value);
    if(res.code === 0){
      message.success("更新题目成功");
    }
    else{
      message.error("更新题目失败, " +  res.message);
    }
}
  else{
    const res=await QuestionControllerService.addQuestionUsingPost(form.value);
    if(res.code === 0){
      message.success("创建题目成功");
    }
    else{
      message.error("创建题目失败, " +  res.message);
    }
  }
}

const onContentChange=(value:string)=>{
  form.value.content=value;
}

const onAnswerChange=(value:string)=>{
  form.value.answer=value;
}
</script>
